﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #container{
            width:730px;
        }
        #container>div{
            width:240px;
            height:240px;
            border:1px solid #ccc;
            float:left;
        }
        
    </style>
    <script src="scripts/jquery-3.2.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var ratLocation = 0;
            var score = 0;
            var difficuty = 500;
            function showRat() {
                clearRat();
                ratLocation = parseInt(Math.random() * 9) + 1;
                $("#box" + ratLocation).html(' <img src="04_avatar_big.jpg"/>');
                setTimeout(showRat,difficuty);
            }
            function clearRat() {
                $("#box" + ratLocation).empty();
            }
            $("#container>div").click(function () {
                var clickedBox = "box" + ratLocation;
                if (clickedBox == $(this).attr("id")) {
                    score += 100;
                    $("#score").html(score + "分");
                }
            });
            showRat();
        });
    </script>
</head>
<body>
    <h1 id="score">0分</h1>
   
    <div id="container">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
        <div id="box4"></div>
        <div id="box5"></div>
        <div id="box6"></div>
        <div id="box7"></div>
        <div id="box8"></div>
        <div id="box9"></div>
    </div>
</body>
</html>
